<script setup lang="ts">


import {onMounted, ref} from "vue";

import { useRouter } from "vue-router";



const router = useRouter();
const onClickLeft = () => {
  router.push('/learn')
}


const list = ref<{
  pathName: string;
  pathId: number;
}[]>([
    {
      pathName: "开发技术及软件开发流程透视",
      pathId: 1
    },
    {
      pathName: "Java技术",
      pathId: 2
    },
    {
      pathName: "数据库原理概述",
      pathId: 3
    },
    {
      pathName: "JDBC基础教程",
      pathId: 4
    },
    {
      pathName: "静态Web开发技术",
      pathId: 5
    },
    {
      pathName: "JavaEE开发技术",
      pathId: 6
    },
    {
      pathName: "面向对象设计深入剖析",
      pathId: 7
    },
    {
      pathName: "I/O和Collection框架",
      pathId: 8
    },
    {
      pathName: "多线程",
      pathId: 9
    },
    {
      pathName: "MVC设计模式",
      pathId: 10
    },
    {
      pathName: "Spring开发技术",
      pathId: 11
    },
    {
      pathName: "Hibernate开发技术",
      pathId: 12
    },
    {
      pathName: "JQuery开发技术",
      pathId: 13
    },
    {
      pathName: "UML程序设计入门",
      pathId: 14
    },
    {
      pathName: "单体测试和日志框架",
      pathId: 15
    },
    {
      pathName: "Linux操作实务",
      pathId: 16
    }
]);

onMounted(() => {
  clickClick();
});

const clickClick = () => {

};

const click1 = (id: number) => {
  router.push({
    path: '/video',
    query: {
      id: id
    }
  })
};


</script>

<template>
  <van-nav-bar class="nav-bar"
               title="学习路线"
  >
  </van-nav-bar>

  <div id="building">
    <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />
    <div id="background-wrapper">

      <div id="background-container">
        <img ref="bgImage" alt="" src="../assets/最终展示章节.png" class="background-img" />
      </div>
      <div id="back-ima">
        <img ref="bgImage" alt="" src="../assets/最终章节展示背景.png" class="back-img" />
      </div>
      <div id="back-character">
        <img ref="bgImage" alt="" src="../assets/最终弹出框人物立绘.png" class="character-img" />
        <img ref="bgImage" alt="" src="../assets/最终人物立绘1.png" class="character-img" style="left: 355%" />
      </div>

      <div id="show-text">


        <van-button size="large" class="item" style="left: 20%" @click="click1(1)">{{list[0].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 40%" @click="click1(2)">{{list[1].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 60%" @click="click1(3)">{{list[2].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 80%" @click="click1(4)">{{list[3].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 100%" @click="click1(5)">{{list[4].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 120%" @click="click1(6)">{{list[5].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 140%" @click="click1(7)">{{list[6].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 160%" @click="click1(8)">{{list[7].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 180%" @click="click1(9)">{{list[8].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 200%" @click="click1(10)">{{list[9].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 220%" @click="click1(11)">{{list[10].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 240%" @click="click1(12)">{{list[11].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 260%" @click="click1(13)">{{list[12].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 280%" @click="click1(14)">{{list[13].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 300%" @click="click1(15)">{{list[14].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 320%" @click="click1(16)">{{list[15].pathName}}</van-button>
      </div>

    </div>
  </div>
</template>

<style scoped>

.item {
  background-image: url("../assets/最终路线按钮框.png");
  font-size: 16px;

  opacity: 0.8;
  font-family: "Microsoft YaHei",math;

  z-index: 100;
  writing-mode:vertical-lr;
  width: 10%;
  height:35%;
  position: absolute;
  top: 30%;
  left: 25%;
}
.list{
  width: 300%;
  height: 60%;
}

#building {
  width: 100%;
  height: 100%;
}
#show-text {
  width: 380%;
  height: 60%;
  top: 10%;
}

#background-wrapper {
  overflow-y: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.background-img {
  width: 380%;
  height: 60%;
  position: absolute;
  top: 10%;
  z-index: 2;
}
.back-img {
  width: 380%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}

.character-img {
  width:20%;
  height: 20%;
  position: absolute;
  top: 60%;
  left: 2%;
  z-index: 3;
}

#background-container {
  top: 46px;
  width: 100%;
  height: 100%;
  position: relative;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity:1;
  z-index:1;
}
.back-btn1 {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

</style>